<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页面</title>
    <link rel="icon" href="../img/favicon.gif" type="image/gif" />
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/main.css">
    <script>
        function init(){
            let nodes=document.querySelectorAll(".leftMenuImgs");
            Array.from(nodes).forEach((item)=>{
                item.addEventListener("click",(event)=>{
                    let node=event.target.parentNode.nextElementSibling;
                    if(node.hidden==true){
                        node.hidden=false;
                        item.classList.add("change");
                    }else{
                        node.hidden=true;
                        item.classList.remove("change");
                    }
                },false);
            });
        }
        window.addEventListener("load",init,false);
        </script>
    </head>
    
    <body>
        <main>
            <header class="head">logo</header>
            <nav class="topMenu">
                <ul class="topMenu_ul">
                    <li class="topMenu_li">
                        <nav>
                            <div class="topMenuImgs" id="tomMenu_img_first"></div>
                            <a class="a_menuClass" href="#">显示首页</a>
                        </nav>
                    </li>
                    <li class="topMenu_li">
                        <nav>
                            <div class="topMenuImgs" id="tomMenu_img_article"></div>
                            <a id="a_insertArticle" class="a_menuClass" href="#">写文章</a>
                        </nav>
                    </li>
                    <li class="topMenu_li">
                        <nav>
                            <div class="topMenuImgs"  id="tomMenu_img_articleType"></div>
                            <a class="a_menuClass" href="#">文章类型</a>
                        </nav>
                    </li>
                    <li class="topMenu_li">
                        <nav>
                            <div class="topMenuImgs"  id="tomMenu_img_config"></div>
                            <a class="a_menuClass" href="#">用户设置</a>
                        </nav>
                    </li>
                </ul>
            </nav>
            <nav class="leftSide">
                <h2 style="text-align: center">文章类型</h2>
                <ul class="leftMenu_ul_level1">
                    <li class="leftMenu_li_level1">
                        Java Core
                        <div class="leftMenuImgs"></div>
                    </li>
                    <ul class="leftMenu_ul_level2" hidden>
                        <li class="leftMenu_li_level2">面向对象</li>
                        <li class="leftMenu_li_level2">多线程</li>
                    </ul>
                    <li class="leftMenu_li_level1">Java Web
                            <div class="leftMenuImgs">
                    </li>
                    <ul class="leftMenu_ul_level2" hidden>
                            <li class="leftMenu_li_level2">Servlet3+</li>
                            <li class="leftMenu_li_level2">JSTL/EL</li>
                        </ul>
                    <li class="leftMenu_li_level1">前端技术
                            <div class="leftMenuImgs">
                    </li>
                    <ul class="leftMenu_ul_level2" hidden>
                            <li class="leftMenu_li_level2">HTML5</li>
                            <li class="leftMenu_li_level2">CSS3</li>
                            <li class="leftMenu_li_level2">ECMAScript 6</li>
                        </ul>
                    <li class="leftMenu_li_level1">心灵鸡汤
                            <div class="leftMenuImgs">
                    </li>
                    <ul class="leftMenu_ul_level2" hidden>
                            <li class="leftMenu_li_level2">心情故事</li>
                        </ul>
                </ul>
            </nav>
            <section class="main">main page</section>
            <nav class="rightSide">right menu</nav>
            <footer class="foot">info</footer>
        </main>
    </body>
    
    </html>